.pagination {
  width: 100%;
  text-align: center;
  overflow: hidden;
  user-select: none;
  padding: 10px 0;
  .page {
    display: inline-block;
    margin: 0 4px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 8px;
    background: var(--blog-card-bg-color);
    color: #99a9bf;
    box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
    -webkit-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
    &:hover {
      background: var(--blog-button-bg-hover-color);
      color: var(--blog-button-text-color);
    }
    &.active {
      background: #00c4b6;
      color: #eee;
      &:hover {
        background: #00c4b6;
      }
    }
    &.omit::before {
      content: '...';
      width: 100%;
      height: 100%;
    }
    &.leftOmit:hover::before {
      content: '\f100';
    }
    &.rightOmit:hover::before {
      content: '\f101';
    }
  }
}
